<template>
  <div class="whole-container">
    <!-- 标题和时间 -->
    <div class="titleAndTimeContainer">
      <div class="titleAndTimeContainer-title">
        <div>
          <span>{{title}}</span>
        </div>
      </div>
      <div class="titleAndTimeContainer-time">
        <div class="dateAndTimeContainer">
          <div>
            <span>{{todayDate}}</span>
          </div>
          <div>
            <span>{{todayTime}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="carouselContainer">
      <el-carousel :interval="4000" type="card" >
        <el-carousel-item v-for="(item,index) in picUrls" :key="index">
          <img width="100%" style="aspect-ratio: 16 / 9;" :src="item" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 成果展示 -->
    <div class="achievementDisplayContainer">
      <div class="achievementDisplayContainer-titleContainer">
        <div></div>
        <div class="achievementDisplayContainer-title">
          <div>
            <span>展 示 成 果</span>
          </div>
        </div>
        <div class="achievementDisplayContainer-more" @click="showAchievement">
          <div>
            <span>更多>></span>
          </div>
        </div>
      </div>
      <div class="achievementDisplayContainer-contentContainer">
        <div class="achievementItem">
          <div class="achievementItemContainer">
            <HazyDisplay></HazyDisplay>
          </div>
        </div>
        <div class="achievementItem">
          <div class="achievementItemContainer">
            <!-- <WordRain></WordRain> -->
            <GIFDigitization></GIFDigitization>
          </div>
        </div>
        <div class="achievementItem">
          <div class="achievementItemContainer">
            <RingMenu></RingMenu>
          </div>
        </div>
      </div>
    </div>
    <!-- 其他 -->
    <div class="otherAndOwnerShip">
      <div class="otherContainer">
        <div class="otherContainer-item">
          <div class="famousSayingBtn" @click="showFamousSaying">
            <span>每日一言</span>
          </div>
          <div class="famousSayingContainer" v-show="isShowSyaing">
            <div>
              <span>{{famousSaying.sayings[this.todayDay]}}</span>
            </div>
          </div>
        </div>
        <div class="otherContainer-item">
          <div>
            <span>版本号：{{versionNo}}</span>
          </div>
        </div>
      </div>
      <div class="ownerShipContainer">
        <div class="up">
          <div>
            <span>{{ownerShip.up}}</span>
          </div>
        </div>

        <div class="down">
          <div>
            <span>{{ownerShip.down}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import moment from "moment";
import { HazyDisplay, GIFDigitization, RingMenu } from "./index.js"

export default {
  name:'Home',
  components: {
    HazyDisplay, GIFDigitization, RingMenu
  },
  data() {
    return {
      todayTime: "",
      todayDate: "",
      timeID: null,
      famousSaying: require("./famous.json"),
      todayDay: 0,
      isShowSyaing: false,
      picUrls: [
        require("../../assets/images/home/blackGirl-violin.jpg"),
        require("../../assets/images/home/city.jpg"),
        require("../../assets/images/home/forest-night.jpg"),
        require("../../assets/images/home/link-DruidTree-ByOcarinaOfTime.jpg"),
        require("../../assets/images/home/Luigi-violin.jpg"),
        require("../../assets/images/home/manyLink.jpg"),
        require("../../assets/images/home/nightSky-piano.jpg")
      ],
    }
  },
  computed: {
    ...mapGetters(['title','ownerShip','versionNo']),
  },
  mounted() {
    document.addEventListener('click', e=>{//解决了每日一言点击不消失的bug
      if(!document?.getElementsByClassName('famousSayingContainer')[0]?.contains(e.target) && !document?.getElementsByClassName('famousSayingBtn')[0]?.contains(e.target)) {
        this.isShowSyaing = false;
      }
    })
    this.getTodayDateInfo()//日期定时器
  },
  beforeDestroy() {
    if(this.timeID) {
      clearTimeout(this.timeID)
    }
    this.timeID = null;
  },
  methods: {
    getTodayDateInfo() {
      const now = new Date();
      const year = now.getFullYear();
      let month = now.getMonth();
      const date = now.getDate();
      const day = now.getDay();
      month = month + 1;
      const arrWeek = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const week = arrWeek[day];
      this.todayTime = moment().format("HH:mm:ss") + " " + week;
      this.todayDate = year + "年" + month + "月" + date + "日 " + " ";
      this.todayDay = date;
      this.timeID = setTimeout((_) => {
        this.getTodayDateInfo();
      }, 1000);
    },
    showFamousSaying() {
      this.isShowSyaing = true;
    },
    showAchievement() {
      this.$router.push("/achievement")
    },
  }
}
</script>

<style lang='less' scoped>
  .whole-container {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    .titleAndTimeContainer {
      width: 100%;
      height: 100px;
      // border: 1px solid red;

      .titleAndTimeContainer-title {
        width: 100%;
        height: 55%;
        font-size: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .titleAndTimeContainer-time {
        width: 100%;
        height: 45%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .dateAndTimeContainer {
          margin-right: 24px;
        }
      }
    }
    .otherAndOwnerShip {
      width: 100%;
      height: 100px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #d4ced9;
      padding-bottom: 16px;
      .otherContainer {
        width: calc( 50% - 70px );
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .otherContainer-item {
          height: 40px;
          display: flex;
          align-items: center;
          position: relative;
          .famousSayingBtn {
            color: #dd3ea8;
            cursor: pointer;
          }
          .famousSayingBtn:hover {
            color: #5a053d;
          }
          .famousSayingContainer {
            width: max-content;
            height: 30px;
            line-height: 30px;
            padding: 2px 16px;
            position: absolute;
            top: 2px;
            left: 70px;
            font-size: 16px;
            border: 1px solid #f1f2f5;
            background: #f1f2f5;
            box-shadow: 0 2px 12px 0 rgb(0,0,0,0.1);
          }
        }
      }

      .ownerShipContainer {
        width: calc( 50% - 70px );
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-evenly;
        // font-size: 12px;
        .up {
          height: 40px;
          display: flex;
          align-items: center;
        }
        .down {
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
    }
    .carouselContainer {
      width: 100%;
      // height: 457px;
      margin-bottom: 8px;
    }
    .achievementDisplayContainer {
      width: 100%;
      // height: 500px;
      display: flex;
      flex-direction: column;
      .achievementDisplayContainer-titleContainer {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .achievementDisplayContainer-title {
          font-size: 28px;
          text-shadow: 2px 2px 3px #222222;
          font-family:"微软雅黑", "宋体", "黑体", Arial;
        }
        .achievementDisplayContainer-more {
          color: #409eff;
          cursor: pointer;
          padding-right: 16px;
        }
        .achievementDisplayContainer-more:hover {
          color: #66b1ff;
        }
      }
      .achievementDisplayContainer-contentContainer {
        width: 100%;
        // height: 1000px;
        padding: 16px 16px 0 16px;
        box-sizing:border-box;
        display: flex;
        flex-wrap: wrap;

        .achievementItem {
          width: calc(( 100% - 32px ) / 3 );
          padding-top: calc(( 100% - 32px ) / 3 );
          // height: 200px;
          margin-right: 16px;
          // background: #222222;
          margin-bottom: 16px;
          position: relative;
          &:nth-child(3n) {
            margin-right: 0;
          }
          .achievementItemContainer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
  }

  /deep/ .el-carousel {
    .el-carousel__container {
      aspect-ratio: 3.3;
      height: auto;
      .el-carousel__arrow {
        background-color: rgba(31, 45, 61, 0.6);
      }
      .el-carousel__arrow:hover {
        background-color: rgba(31, 45, 61, 0.867);
      }
    }
    .el-carousel__indicators--outside {
      button {
        background-color: #5b87de;
      }
    }
    .el-carousel__indicators {
      .el-carousel__button {
        height: 5px;
      }
    }
  }
</style>